<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        <!-- 个人信息板块 -->
        <el-card class="box-card">
          <div class="user-profile">
            <div class="text-center">
              <userAvatar />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />
                {{ t('jbx.users.username') }}
                <div class="pull-right">
                  <span v-if="state.user.username && state.user.username.length <= 20">{{ state.user.username }}</span>
                  <span v-else>
                    <el-tooltip class="item" effect="dark" :content="state.user.username" placement="top">
                      <span>{{ state.user.username ? state.user.username.slice(0, 20) + '...' : '' }}</span>
                    </el-tooltip>
                  </span>
                </div>
              </li>
              <li class="list-group-item">
                <span>{{ t('jbx.users.displayName') }}</span>
                <div class="pull-right">{{ state.user.displayName }}</div>
              </li>
              <li class="list-group-item">
                <span>{{ t('jbx.users.nickName') }}</span>
                <div class="pull-right">{{ state.user.nickName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="color" />
                {{ t('jbx.users.gender') }}
                <div class="pull-right">
                  <span v-if="state.user.gender === 1">{{ t('jbx.users.genderMale') }}</span>
                  <span v-else-if="state.user.gender === 2">{{ t('jbx.users.genderFemale') }}</span>
                  <span v-else>{{ t('jbx.users.genderOther') }}</span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />
                {{ t('jbx.users.mobile') }}
                <div class="pull-right">{{ state.user.mobile }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />
                {{ t('jbx.users.email') }}
                <div class="pull-right">
                  <span v-if="state.user.email && state.user.email.length <= 20">{{ state.user.email }}</span>
                  <span v-else>
                    <el-tooltip class="item" effect="dark" :content="state.user.email" placement="top">
                      <span>{{ state.user.email ? state.user.email.slice(0, 20) + '...' : '' }}</span>
                    </el-tooltip>
                  </span>
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />
                {{ t('jbx.users.department') }}
                <div class="pull-right">{{ state.user.departmentName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="guide" />
                {{ t('org.from') }}
                <dict-tag class="pull-right" :options="sys_data_object_from" :value="state.user.objectFrom" />
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />
                {{ t('jbx.users.birthDate') }}
                <div class="pull-right">{{ state.user.birthDate }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16" :xs="24">
        <!-- 右侧设置标签页 -->
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="t('jbx.profile.basic')" name="userinfo">
              <userInfo :user="state.user" :genderOptions="sys_user_sex" @profileDisplay="profileDisplay" />
            </el-tab-pane>
            <el-tab-pane :label="t('jbx.profile.updatePwd')" name="resetPwd">
              <resetPwd :pwdPolicy="pwdPolicy" />
            </el-tab-pane>
            <el-tab-pane :label="t('jbx.profile.accountBinding')" name="accountBinding">
              <accountBinding />
            </el-tab-pane>
            <el-tab-pane :label="t('jbx.profile.onlineDevices')" name="onlineDevices">
              <onlineDevices />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile" lang="ts">
import modal from "@/plugins/modal";
import userAvatar from "./userAvatar.vue";
import userInfo from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import accountBinding from "./accountBinding.vue";
import onlineDevices from "./onlineDevices.vue";
import { currentUser, getPwdPolicy } from "@/api/login";
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import i18n from '@/languages'

const { t } = i18n.global;
const { proxy } = getCurrentInstance()!;
const { sys_data_object_from, sys_user_sex } = proxy!.useDict("sys_data_object_from", "sys_user_sex");

const activeTab: any = ref("userinfo");
const state: any = reactive({
  user: {},
});

//密码策略
const pwdPolicy: any = ref<any>({})

function getUser(): any {
  currentUser().then((response: any) => {
    state.user = response.data;
  });
}

//获取密码策略
function passwordPolicy(): any {
  getPwdPolicy().then((res: any) => {
    if (res.code === 200) {
      pwdPolicy.value = res.data;
    } else {
      modal.msgError(t('jbx.passwordpolicy.none'))
    }
  })
}

function profileDisplay(data: any): any {
  state.user.displayName = data.displayName
  state.user.nickName = data.nickName
  state.user.mobile = data.mobile
  state.user.email = data.email
  state.user.birthDate = data.birthDate
  state.user.gender = data.gender
}

onMounted(() => {
  getUser();
  passwordPolicy();
});
</script>

<style lang="scss" scoped>
.user-profile {
  .user-info-head {
    position: relative;
    display: inline-block;
    height: 120px;
  }

  .user-info-head:hover:after {
    content: "+";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #eee;
    background: rgba(0, 0, 0, 0.5);
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    line-height: 110px;
    border-radius: 50%;
  }
}

.list-group-striped>li:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.pull-right {
  float: right !important;
}
</style>